<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="90px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="账号" prop="number">
                        <el-input v-model="form.number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="用户类型" prop="userLevel">
                        <el-select  style="width: 100%;"  v-model="form.userLevel" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.userLevelList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="菜单角色" prop="roleIdArray">
                        <el-select  style="width: 100%;"  v-model="form.roleIdArray" clearable multiple placeholder="请选择：">
                            <el-option v-for="item in configData.roleIdList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="数据权限" prop="dataPermissionIdArray">
                        <el-select  style="width: 100%;"  v-model="form.dataPermissionIdArray" multiple  clearable placeholder="请选择：">
                            <el-option v-for="item in configData.dataPermissionList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :xs="24" :sm="16" :md="16" :lg="12" :xl="12">
                    <el-form-item label="人员选择" prop="employeeRows">
                        <sc-table-select :inputWidth="700" v-model="employeeRows" :apiObj="apiObj" :fileName="fileName" :table-width="700"
                            :props="tableProps" @change="change" :defaultSelected="selectedLabel">
                        </sc-table-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="12" :xl="12">
                    <el-form-item label="人员部门">
                        <el-input v-model="dept" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="修改密码" prop="modifyPassword">
                        <el-switch v-model="form.modifyPassword" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" active-value="1" inactive-value="0" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="form.status" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" active-value="normal" inactive-value="disable" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.modifyPassword == '1'">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="confirmPassword" label="确认密码">
                        <el-input v-model="form.confirmPassword" prefix-icon="el-icon-lock" clearable
                            show-password></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="上传头像" prop="file">
                    <tsUpload @updateFile="updateFile" :imageUrl="imageUrl" @removeFile="removeFile"></tsUpload>
                </el-form-item>

            </el-row>
        </el-form>
        <!-- 底部按钮区域 -->
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="updateUser(formRef)">确 定</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import { ElNotification } from 'element-plus';
import { FullScreen, CopyDocument, Plus, UploadFilled } from '@element-plus/icons-vue'
import tsUpload from '@/components/tsUpload/file.vue'
import Api from '@/api/model/system'
import tool from '@/utils/tool';
const emit = defineEmits(['updatetable'])
const form = ref({});
const roleIdArray = ref([])
const formRef = ref()
const formRules = reactive({
    confirmPassword: [
        { required: true, message: '请再次输入新密码' },
        {
            validator: (formRules, value, callback) => {
                if (value !== form.value.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }
        }
    ]
})
const imageUrl = ref({})
const tableProps = {
    label: 'name',
    value: 'id',
}
const selectedLabel = ref()
const apiObj = ref(Api.select.query)
const fileName = ref('ChooseEmployeeReport')
const employeeRows = ref({
    // name:'',
    // id:''
})
const configData = ref({})
const dept = ref()
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
onMounted(() => {
    getInit()
})


const getInit = async () => {
    let res = await Api.user.detail.post(props.paramsData);
    if (res.code == 200) {
        configData.value = res.configData
        form.value = res.data
        dept.value = res.data.deptName
        selectedLabel.value = res.data.employeeName
        if (res.data.fileFullPath) {
            imageUrl.value.url = res.data.fileFullPath
            imageUrl.value.name = res.data.fileName
        }
    }
}


const updateFile = (val) => {
    form.value.deleteFlag = ''
    form.value.file = val
}

const removeFile = () => {
    form.value.file = undefined
    form.value.deleteFlag = '1'
}
const updateVisible = () => {
    emit('updatetable')
}



const restAddFormData = () => {
    formRef.value.resetFields();
}

const change = (val) => {
    dept.value = val.deptName
    form.value.employeeId = val.id
}


// 上传
const updateUser = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            updateData();
        }
    })
}

const updateData = async () => {
    
    // let formData =JSON.parse(JSON.stringify(list1.value));
    let AESPassword = ''
    if (form.value.password) {
        AESPassword = tool.crypto.AES.encrypt(form.value.password,'NdOvJKcXHsR0y2cYMIAIFw==')
    }
    var params = {
        bean: {
            number: form.value.number,
            userLevel: form.value.userLevel,
            roleIdArray: [...form.value.roleIdArray],
            employeeId: form.value.employeeId,
            status: form.value.status,
            modifyPassword: form.value.modifyPassword,
            password: AESPassword,
            confirmPassword: AESPassword,
            dataPermissionId: form.value.dataPermissionId,
            id: form.value.id,
            file: form.value.file,
            deleteFlag: form.value.deleteFlag,
            dataPermissionIdArray:[...form.value.dataPermissionIdArray]
        }
    }
    var res = await Api.user.update.post(params);
    if (res.code == 200) {
        restAddFormData()
        ElNotification.success({ title: '', message: '修改成功！', duration: 2000 });
        emit('updatetable', true)
    }
}

</script>

<style lang="scss" scoped></style>

